<g:render template="../home/header" ></g:render>
<link rel="stylesheet" href="${resource(dir: '/photobox/upload', file: 'webuploader.css')}" type="text/css">
<script type="text/javascript" src="${resource(dir:'/photobox/upload',file:'webuploader.js')}"></script>
<style>
#container {
    color: #838383;
    font-size: 12px;
}
.queueTit{ margin: 0 20px;font-size: 16px;}
#uploader .queueList {
    margin: 20px 40px 10px;
    border: 3px dashed #72af26;
}
#uploader .queueList.filled {
    padding: 17px;
    margin: 0;
    border: 3px dashed transparent;
    text-align:center;
}
#uploader .queueList.webuploader-dnd-over {
    border: 3px dashed #999999;
}

#uploader p {margin: 0;}

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}

#uploader .placeholder {
    height: 465px;
    padding-top: 178px;
    text-align: center;
    background: white;
    color: #cccccc;
    font-size: 18px;
    position: relative;
}

#uploader .placeholder .webuploader-pick {
    font-size: 18px;
    background: #00b7ee;
    border-radius: 3px;
    line-height: 44px;
    padding: 0 30px;
    *width: 120px;
    color: #fff;
    display: inline-block;
    margin: 0 auto 20px auto;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#uploader .placeholder .webuploader-pick-hover {
    background: #00a2d4;
}

#uploader .placeholder .flashTip {
    color: #666666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 20px;
}
#uploader .placeholder .flashTip a {
    color: #0785d1;
    text-decoration: none;
}
#uploader .placeholder .flashTip a:hover {
    text-decoration: underline;
}

#uploader .filelist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#uploader .filelist:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}

#uploader .filelist li {
    width: 110px;
    height: 110px;
    background: white;
    text-align: center;
    margin: 0 8px 20px 0;
    position: relative;
    display: inline;
    float: left;
    overflow: hidden;
    font-size: 12px;
}

#uploader .filelist li p.log {
    position: relative;
    top: -45px;
}

#uploader .filelist li p.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow : ellipsis;
    top: 5px;
    text-indent: 5px;
    text-align: left;
}

#uploader .filelist li p.progress {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 8px;
    overflow: hidden;
    z-index: 50;
    margin: 0;
    border-radius: 0;
    background: none;
    -webkit-box-shadow: 0 0 0;
}
#uploader .filelist li p.progress span {
    display: none;
    overflow: hidden;
    width: 0;
    height: 100%;
    background: #1483d8 url(../images/progress.png) repeat-x;

    -webit-transition: width 200ms linear;
    -moz-transition: width 200ms linear;
    -o-transition: width 200ms linear;
    -ms-transition: width 200ms linear;
    transition: width 200ms linear;

    -webkit-animation: progressmove 2s linear infinite;
    -moz-animation: progressmove 2s linear infinite;
    -o-animation: progressmove 2s linear infinite;
    -ms-animation: progressmove 2s linear infinite;
    animation: progressmove 2s linear infinite;

    -webkit-transform: translateZ(0);
}

@-webkit-keyframes progressmove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 17px 0;
    }
}
@-moz-keyframes progressmove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 17px 0;
    }
}
@keyframes progressmove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 17px 0;
    }
}

#uploader .filelist li p.imgWrap {
    position: relative;
    z-index: 2;
    line-height: 110px;
    vertical-align: middle;
    overflow: hidden;
    width: 110px;
    height: 110px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webit-transition: 200ms ease-out;
    -moz-transition: 200ms ease-out;
    -o-transition: 200ms ease-out;
    -ms-transition: 200ms ease-out;
    transition: 200ms ease-out;
}

#uploader .filelist li img {
    width: 100%;
}

#uploader .filelist li p.error {
    background: #f43838;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    width: 100%;
    z-index: 100;
}

#uploader .filelist li .success {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    z-index: 200;
    background: url(../images/success.png) no-repeat right bottom;
}

#uploader .filelist div.file-panel {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
    background: rgba( 0, 0, 0, 0.5 );
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

#uploader .filelist div.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/icons.png) no-repeat;
    margin: 5px 1px 1px;
    cursor: pointer;
}

#uploader .filelist div.file-panel span.rotateLeft {
    background-position: 0 -24px;
}
#uploader .filelist div.file-panel span.rotateLeft:hover {
    background-position: 0 0;
}

#uploader .filelist div.file-panel span.rotateRight {
    background-position: -24px -24px;
}
#uploader .filelist div.file-panel span.rotateRight:hover {
    background-position: -24px 0;
}

#uploader .filelist div.file-panel span.cancel {
    background-position: -48px -24px;
}
#uploader .filelist div.file-panel span.cancel:hover {
    background-position: -48px 0;
}

#uploader .statusBar {
    height: 63px;
    border-top: 1px solid #dadada;
    padding: 0 20px;
    line-height: 63px;
    vertical-align: middle;
    position: relative;
}

#uploader .statusBar .progress {
    border: 1px solid #1483d8;
    width: 198px;
    background: #fff;
    height: 18px;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    color: #6dbfff;
    position: relative;
    margin: 0 10px 0 0;
}
#uploader .statusBar .progress span.percentage {
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background: #1483d8;
    position: absolute;
}
#uploader .statusBar .progress span.text {
    position: relative;
    z-index: 10;
}

#uploader .statusBar .info {
    display: inline-block;
    font-size: 14px;
    color: #666666;
}

#uploader .statusBar .btns {
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 40px;
}

#filePicker2 {
    display: inline-block;
    float: left;
}

#uploader .statusBar .btns .webuploader-pick,
#uploader .statusBar .btns .uploadBtn,
#uploader .statusBar .btns .uploadBtn.state-uploading,
#uploader .statusBar .btns .uploadBtn.state-paused {
    background: #ffffff;
    border: 1px solid #cfcfcf;
    color: #565656;
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    float: left;
}
#uploader .statusBar .btns .webuploader-pick-hover,
#uploader .statusBar .btns .uploadBtn:hover,
#uploader .statusBar .btns .uploadBtn.state-uploading:hover,
#uploader .statusBar .btns .uploadBtn.state-paused:hover {
    background: #f0f0f0;
}

#uploader .statusBar .btns .uploadBtn {
    background: #00b7ee;
    color: #fff;
    border-color: transparent;
}
#uploader .statusBar .btns .uploadBtn:hover {
    background: #00a2d4;
}

#uploader .statusBar .btns .uploadBtn.disabled {
    pointer-events: none;
    opacity: 0.6;
}
.upload_area{
    margin-bottom: 20px;
    border:1px solid #ccc;
}
</style>
<script type="text/javascript">
    jQuery(function() {
        var $ = jQuery,    // just in case. Make sure it's not an other libaray.

                $wrap = $('#uploader'),

        // 图片容器
                $queue = $('<div id="show_img_id"></div>')
                        .appendTo( $wrap.find('.queueList') ),

        // 状态栏，包括进度和控制按钮
                $statusBar = $wrap.find('.statusBar'),

        // 文件总体选择信息。
                $info = $statusBar.find('.info'),

        // 上传按钮
                $upload = $wrap.find('.uploadBtn'),

        // 没选择文件之前的内容。
                $placeHolder = $wrap.find('.placeholder'),

        // 总体进度条
                $progress = $statusBar.find('.progress').hide(),

        // 添加的文件数量
                fileCount = 0,

        // 添加的文件总大小
                fileSize = 0,

        // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

        // 缩略图大小
                thumbnailWidth = 110 * ratio,
                thumbnailHeight = 110 * ratio,

        // 可能有pedding, ready, uploading, confirm, done.
                state = 'pedding',

        // 所有文件的进度信息，key为file id
                percentages = {},

                supportTransition = (function(){
                    var s = document.createElement('p').style,
                            r = 'transition' in s ||
                                    'WebkitTransition' in s ||
                                    'MozTransition' in s ||
                                    'msTransition' in s ||
                                    'OTransition' in s;
                    s = null;
                    return r;
                })(),

        // WebUploader实例
                uploader;

        if ( !WebUploader.Uploader.support() ) {
            sAlert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
            throw new Error( 'WebUploader does not support the browser you are using.' );
        }

        // 实例化
        uploader = WebUploader.create({
            // 自动上传。
            auto: true,
            pick: {
                id: '#filePicker',
                label: '点击选择图片'
            },
            dnd: '#uploader .queueList',
            paste: document.body,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png,tif',
                mimeTypes: 'image/*'
            },

            // swf文件路径
            swf: "${resource(dir:'/photobox/upload',file:'Uploader.swf')}",

            // 文件接收服务端。
            server: "<g:createLink controller="photo" action="save"></g:createLink> ",

            disableGlobalDnd: true,

            chunked: true,
            // server: 'http://webuploader.duapp.com/server/fileupload.php',

            fileNumLimit: 300,
            fileSizeLimit: 300 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 300 * 1024 * 1024    // 50 M
        });

        // 添加“添加文件”的按钮，
        uploader.addButton({
            id: '#filePicker2',
            label: '继续添加'
        });

        // 当有文件添加进来时执行，负责view的创建
        function addFile( file ) {
            var $li = $( '<li id="' + file.id + '">' +
                            //'<p class="title">' + file.name + '</p>' +
                            //'<p class="imgWrap"></p>'+
                            //'<p class="progress"><span></span></p>' +
                            '</li>' ),

                    $btns = $('<div class="file-panel">' +
                            '<span class="cancel">删除</span>' +
                            '<span class="rotateRight">向右旋转</span>' +
                            '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
                    $prgress = $li.find('p.progress span'),
                    $wrap = $li.find( 'p.imgWrap' ),
                    $info = $('<p class="error"></p>'),

                    showError = function( code ) {
                        switch( code ) {
                            case 'exceed_size':
                                text = '文件大小超出';
                                break;

                            case 'interrupt':
                                text = '上传暂停';
                                break;

                            default:
                                text = '上传失败，请重试';
                                break;
                        }
                        sAlert("上传失败（文件大小："+(file.size/1024/1024).toFixed(2)+'兆；文件格式：'+file.name.substr(file.name.lastIndexOf('.')+1)+'）')
                        $info.text( text ).appendTo( $li );
                    };

            if ( file.getStatus() === 'invalid' ) {
                showError( file.statusText );
            } else {
                // @todo lazyload
                $wrap.text( '预览中' );
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $wrap.text( '不能预览' );
                        return;
                    }

                    var img = $('<img src="'+src+'">');
                    $wrap.empty().append( img );
                }, thumbnailWidth, thumbnailHeight );

                percentages[ file.id ] = [ file.size, 0 ];
                file.rotation = 0;
            }

            file.on('statuschange', function( cur, prev ) {
                if ( prev === 'progress' ) {
                    $prgress.hide().width(0);
                } else if ( prev === 'queued' ) {
                    $li.off( 'mouseenter mouseleave' );
                    $btns.remove();
                }

                // 成功
                if ( cur === 'error' || cur === 'invalid' ) {
                    console.log( file.statusText );
                    showError( file.statusText );
                    percentages[ file.id ][ 1 ] = 1;
                } else if ( cur === 'interrupt' ) {
                    showError( 'interrupt' );
                } else if ( cur === 'queued' ) {
                    percentages[ file.id ][ 1 ] = 0;
                } else if ( cur === 'progress' ) {
                    $info.remove();
                    $prgress.css('display', 'block');
                } else if ( cur === 'complete' ) {
                    $li.append( '<span class="success"></span>' );
                }

                $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
            });

            $li.on( 'mouseenter', function() {
                $btns.stop().animate({height: 30});
            });

            $li.on( 'mouseleave', function() {
                $btns.stop().animate({height: 0});
            });

            $btns.on( 'click', 'span', function() {
                var index = $(this).index(),
                        deg;

                switch ( index ) {
                    case 0:
                        uploader.removeFile( file );
                        return;

                    case 1:
                        file.rotation += 90;
                        break;

                    case 2:
                        file.rotation -= 90;
                        break;
                }

                if ( supportTransition ) {
                    deg = 'rotate(' + file.rotation + 'deg)';
                    $wrap.css({
                        '-webkit-transform': deg,
                        '-mos-transform': deg,
                        '-o-transform': deg,
                        'transform': deg
                    });
                } else {
                    $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
                    // use jquery animate to rotation
                    // $({
                    //     rotation: rotation
                    // }).animate({
                    //     rotation: file.rotation
                    // }, {
                    //     easing: 'linear',
                    //     step: function( now ) {
                    //         now = now * Math.PI / 180;

                    //         var cos = Math.cos( now ),
                    //             sin = Math.sin( now );

                    //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                    //     }
                    // });
                }


            });

            $li.appendTo( $queue );
        }

        // 负责view的销毁
        function removeFile( file ) {
            var $li = $('#'+file.id);

            delete percentages[ file.id ];
            updateTotalProgress();
            $li.off().find('.file-panel').off().end().remove();
        }

        function updateTotalProgress() {
            var loaded = 0,
                    total = 0,
                    spans = $progress.children(),
                    percent;

            $.each( percentages, function( k, v ) {
                total += v[ 0 ];
                loaded += v[ 0 ] * v[ 1 ];
            } );

            percent = total ? loaded / total : 0;

            spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
            spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
            updateStatus();
        }

        function updateStatus() {
            var text = '', stats;

            if ( state === 'ready' ) {
                text = '选中' + fileCount + '张图片，共' +
                        WebUploader.formatSize( fileSize ) + '。';
            } else if ( state === 'confirm' ) {
                stats = uploader.getStats();
                if ( stats.uploadFailNum ) {
                    text = '已成功上传' + stats.successNum+ '张照片至XX相册，'+
                            stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
                }

            } else {
                stats = uploader.getStats();
                text = '共' + fileCount + '张（' +
                        WebUploader.formatSize( fileSize )  +
                        '），已上传' + stats.successNum + '张';

                if ( stats.uploadFailNum ) {
                    text += '，失败' + stats.uploadFailNum + '张';
                }
            }
            $info.html( text );
        }

        function setState( val ) {
            var file, stats;

            if ( val === state ) {
                return;
            }

            $upload.removeClass( 'state-' + state );
            $upload.addClass( 'state-' + val );
            state = val;

            switch ( state ) {
                case 'pedding':
                    $placeHolder.removeClass( 'element-invisible' );
                    $queue.parent().removeClass('filled');
                    $queue.hide();
                    $statusBar.addClass( 'element-invisible' );
                    uploader.refresh();
                    break;

                case 'ready':
                    $placeHolder.addClass( 'element-invisible' );
                    $( '#filePicker2' ).removeClass( 'element-invisible');
                    $queue.parent().addClass('filled');
                    $queue.show();
                    $statusBar.removeClass('element-invisible');
                    uploader.refresh();
                    break;

                case 'uploading':
                    $( '#filePicker2' ).addClass( 'element-invisible' );
                    $progress.show();
                    $upload.text( '暂停上传' );
                    break;

                case 'paused':
                    $progress.show();
                    $upload.text( '继续上传' );
                    break;

                case 'confirm':
                    $progress.hide();
                    $upload.text( '开始上传' ).addClass( 'disabled' );

                    stats = uploader.getStats();
                    if ( stats.successNum && !stats.uploadFailNum ) {
                        setState( 'finish' );
                        return;
                    }
                    break;
                case 'finish':
                    stats = uploader.getStats();
                    if ( stats.successNum ) {
                        //alert( '上传成功' );
                    } else {
                        // 没有成功的图片，重设
                        state = 'done';
                        location.reload();
                    }
                    break;
            }

            updateStatus();
        }

        uploader.onUploadProgress = function( file, percentage ) {
            var $li = $('#'+file.id),
                    $percent = $li.find('.progress span');

            $percent.css( 'width', percentage * 100 + '%' );
            percentages[ file.id ][ 1 ] = percentage;
            if(percentage == 1){
                $('#prompt_info').html(' 上传完成，正在生成缩略图');
            }
            updateTotalProgress();
        };
        uploader.onUploadSuccess = function(file, response ){
            var width = file._info.width
            var height = file._info.height
            if(height > width){
                $('#show_shape').val(2)
            }
            $('#show_img_id').html('<img src="../'+response.bigImagePath+'">')
            $('#origin_image_path').val(response.originImagePath)
            $('#small_image_path').val(response.smallImagePath)
            $('#middle_image_path').val(response.middleImagePath)
            $('#big_image_path').val(response.bigImagePath)
        }
        uploader.onFileQueued = function( file ) {
            fileCount++;
            fileSize += file.size;

            if ( fileCount === 1 ) {
                $placeHolder.addClass( 'element-invisible' );
                $statusBar.show();
            }

            addFile( file );
            setState( 'ready' );
            updateTotalProgress();
        };

        uploader.onFileDequeued = function( file ) {
            fileCount--;
            fileSize -= file.size;

            if ( !fileCount ) {
                setState( 'pedding' );
            }

            removeFile( file );
            updateTotalProgress();

        };

        uploader.on( 'all', function( type ) {
            var stats;
            switch( type ) {
                case 'uploadFinished':
                    setState( 'confirm' );
                    break;

                case 'startUpload':
                    setState( 'uploading' );
                    break;

                case 'stopUpload':
                    setState( 'paused' );
                    break;

            }
        });

        uploader.onError = function( code ) {

            sAlert( 'Eroor: ' + code);
        };

        $upload.on('click', function() {
            if ( $(this).hasClass( 'disabled' ) ) {
                return false;
            }

            if ( state === 'ready' ) {
                uploader.upload();
            } else if ( state === 'paused' ) {
                uploader.upload();
            } else if ( state === 'uploading' ) {
                uploader.stop();
            }
        });

        $info.on( 'click', '.retry', function() {
            uploader.retry();
        } );

        $info.on( 'click', '.ignore', function() {
            sAlert( 'todo' );
        } );

        $upload.addClass( 'state-' + state );
        updateTotalProgress();
    });

    function verifyNull(idName ,content,selector){

        if(!$("#"+idName).val()){
//            $("#"+selector).html("请输入"+content).attr("style","color:red");
            $("#"+selector).html("请输入"+content);
        } else{
            $("#"+selector).html("");
        }
    }
    $(document).ready(function(){
        $("#form-description").keydown(function(){
            var curLength=$("#form-description").val().length;
            if(curLength >= 200){
                var num=$("#form-description").val().substr(0,200);
                $("#form-description").val(num);
                $("#remindIntro").html("字数限制200字以内").attr("style","color:red");
            }
        });
    })


   function check(){
       var photoSizeObj = $('input:checkbox[name="photoSize"]:checked');
       var categoryTheme = $('input:checkbox[name="categoryTheme"]:checked');
       var categoryStyle = $('input:checkbox[name="categoryStyle"]:checked');
      // var d1=new Date($("#pssj").val());

       if(categoryTheme.length!=0){
           $("#remindTheme").html("");
       }
       if(categoryStyle.length!=0){
           $("#remindStyle").html("");
       }
       if($("#pssj").val().length!=0){
           $("#remindTime").html("");
       }
       if(photoSizeObj.length!=0){
           $("#remindSize").html("");
       }


       if(!$("#origin_image_path").val()){
           sAlert("请上传作品");
           return false;
       } else if(!$("#photoName").val()){
           $("#remindName").html("请输入作品名称").attr("style","color:red");
           return false;
       } else if(categoryTheme.length==0){
           $("#remindTheme").html("请选择主题").attr("style","color:red");
           return false;
       }else if(categoryStyle.length==0){
           $("#remindStyle").html("请选择风格").attr("style","color:red");
           return false;
       }else if(!$("#pssj").val()){
           $("#remindTime").html("请选择拍摄时间").attr("style","color:red");
           return false;
       }else if(!$("#photoDevice").val()){

           $("#remindDivice").html("请输入使用设备").attr("style","color:red");
           return false;
       } else if(!$("#form-description").val()){

           $("#remindIntro").html("请输入作品介绍").attr("style","color:red");
           return false;
       } else if(!$("#photoKeyword").val()){

           $("#remindKeyword").html("请输入关键词").attr("style","color:red");
           return false;
       } else if(!$("#price").val()){

           $("#remindPrice").html("请输入价格").attr("style","color:red");
           return false;
       } else if(photoSizeObj.length==0){
           $("#remindSize").html("请选择制作尺寸").attr("style","color:red");
           return false;
       } else if(!(document.getElementById('isAgree').checked)){
           $("#remindRead").html("请阅读协议").attr("style","color:red");
           return false;
       }
       if(parseInt($("#mUpCount").html())>=30) {
           sAlert("本月最多可上传30幅作品，当前已上传"+$("#mUpCount").html()+"张");
           return false;
       }

       return true;
   }

    var checkT = function(){
            var d= new Date();
            var d1=new Date($("#pssj").val());
            if(d1>d) {
                $("#remindTime").html("拍摄时间不能大于当前日期").attr("style","color:red");
                $("#pssj").val(d.format("yyyy-MM-dd"));
            }else {
                $("#remindTime").html("");
            }

    }

    $(document).ready(function () {
        $("#isDeal").change(function () {
            var arr = $(this).val();
            $("#settlementMode").toggle();
        });
    });

</script>

<div class="load_blk upload_area" style="padding-bottom: 0;">
    <div id="uploader" class="wu-example">
        <div class="queueTit">
            <h3 class="f_l" style="font-size: 16px;">上传新作品<span id="tipS"></span></h3>
            <span class="f_r mTo_20">用户每月可上传30副作品，您已经上传<em id="mUpCount" class="green">${mPhoteSize}</em>幅</span>
        </div>
        <div class="queueList clear">
            <div id="dndArea" class="placeholder">
                <div id="filePicker"></div>
                <p>或将照片拖到这里</p>
            </div>
        </div>
        <div style="text-align: right; font-size: 14px; margin: 0 20px 10px 0;"> <em class="red"> *</em> 注：所传图片长边大于等于4000ppi；支持图片格式包括JEPG,TIFF</div>
        <div class="statusBar" style="display:none;">
            <div class="progress">
                <span class="text">0%</span>
                <span class="percentage"></span>
            </div><div class="info"></div><span id="prompt_info"></span>
            <div class="btns">
                <div id="filePicker2"></div>
            </div>
        </div>
    </div>
</div>
<div class="load_blk load_blk_ying pTo_30" style="background: #fcfcfc;">
    <g:form action="create" onsubmit="return check()">
        <input type="hidden" id="origin_image_path" name="origin_image_path" value="" />
        <input type="hidden" id="small_image_path" name="small_image_path" value="" />
        <input type="hidden" id="middle_image_path" name="middle_image_path" value="" />
        <input type="hidden" id="big_image_path" name="big_image_path" value="" />
        <input type="hidden" id="show_shape" name="show_shape" value=1 />
        <div class="zp_zi">
            <label>作品名称：</label>
            <div class="zp_InXX">
                <g:textField name="name" class="zp_zi_text"  id="photoName" onblur="verifyNull('photoName','作品名称','remindName')"></g:textField>
                <span class="fs_12 red" id="remindName"></span>
            </div>
        </div>
        <div class="zp_zi">
            <label>作品主题：</label>
            <div class="zp_InXX">
                <g:each in="${category}">
                    <g:if test="${it.categoryType == 1}">
                        <div class="zp_class f_l" style=" width:100px;">
                            <g:checkBox name="categoryTheme" value="${it.id}" checked="null" />
                            ${it.name}
                        </div>
                    </g:if>
                </g:each>
                <span class="fs_12 red" id="remindTheme"></span>
            </div>
        </div>
        <div class="zp_zi">
            <label>作品风格：</label>
            <div class="zp_InXX">
                <g:each in="${category}">
                    <g:if test="${it.categoryType == 2}">
                        <div class="zp_class f_l" style=" width:100px;">
                            <g:checkBox name="categoryStyle" value="${it.id}" checked="null" />
                            ${it.name}
                        </div>
                    </g:if>
                </g:each>
                <span class="fs_12 red" id="remindStyle"></span>
            </div>
        </div>
        <div class="zp_zi">
            <label>拍摄时间：</label>
            <div class="zp_InXX">
                <div class="demo"><input id="pssj" name="picTime" type="text" onchange="checkT()" value="" onclick="SelectDate(this,'yyyy-MM-dd')" /></div>
              </div>
              <span id="date_span"></span>
            <span id="remindTime"></span>
          </div>
          <script type="text/javascript" src="${resource(dir:'/photobox',file:'adddate.js')}" content="text/html; charset=UTF-8"></script>

          <div class="zp_zi">
              <label>使用设备：</label>
              <div class="zp_InXX">
                  <g:textField name="device" class="zp_zi_text" id="photoDevice" onblur="verifyNull('photoDevice','使用设备','remindDivice')"></g:textField>
                  <span class="fs_12 red" id="remindDivice"></span>
              </div>
          </div>
          <div class="zp_zi">
              <label>作品介绍：</label>
              <div class="zp_InXX">
                  <g:textArea rows="5" cols="40"  name="description" id="form-description"  placeholder="输入" style=" border: 1px solid #e3e3e3;" onblur="verifyNull('form-description','作品介绍','remindIntro')" maxlength="200"/>
                  <span class="fs_12 red" id="remindIntro"></span>
              </div>
          </div>
          <div class="zp_zi">
              <label>关键词：</label>
              <div class="zp_InXX">
                  <g:textField name="keywords" class="zp_zi_text" id="photoKeyword" onblur="verifyNull('photoKeyword','关键字','remindKeyword')"></g:textField>
                  <div class="f_r" style="line-height:40px;" >可添加多个关键词，之间用“；”号隔开</div>
                  <div class="fs_12 red" id="remindKeyword"></div>
              </div>
          </div>
          <div class="zp_zi" style="position: relative;">
              <label>作品价格：</label>
              <div class="zp_InXX">
                  <input type="text" id="price" name="price" value="500"  class="zp_zi_text" readonly="true" style="border:0px;" onblur="verifyNull('price','价格','remindPrice')"/>
                  %{--<p class="jiesuan_btn"><input id="priceButton" onclick="setPrice()" type="button" value="结算" class="priceButton" /></p>--}%
                  <span class="fs_12 red" id="remindPrice"></span>
            </div>
        </div>
        <div class="zp_zi">
            <label>制作尺寸：</label>
            <div class="zp_InXX">
                <g:each in="${photoSize}" >
                    <div class="zp_class f_l">
                        <g:checkBox name="photoSize" value="${it.id}" checked="null" id=""> </g:checkBox>
                        ${it.name}
                    </div>
                </g:each>
                <span class="fs_12 red" id="remindSize"></span>
            </div>
        </div>
        <div class="zp_zi">
            <label style="line-height: 20px;">是否委托版权交易：</label>
            <div class="zp_InXX">
                <div class="f_l">
                <g:select name="isDeal" from="${isOrNo}" optionKey="id" optionValue="text"  style="width: 200px;">
                    %{--<g:if test="${isDeal?.id==1}">
                        <g:select name="isDeal" from="${isOrNo}" optionValue="text" />
                    </g:if>--}%
                </g:select>
                </div>
                <div class="f_l mLe_30" id="settlementMode">
                    <select style="width: 200px;">
                        <option value="按次结算" selected="selected">按次结算</option>
                        <option value="按月结算" selected="selected">按月结算</option>
                        <option value="按季结算" selected="selected">按季结算</option>

                    </select>
                </div>
            </div>
            <div class="zp_InXX clear">注：版权交易价格¥20.00/次；¥100.00/月；¥180.00／季</div>
        </div>
        <div class="zp_zi">
            <label><input  id="isAgree" type="checkbox"  ></label>
            <div class="zp_InXX"  style="color:#202020; font-size: 16px; ">
                我已阅读并同意
                <a data-toggle="modal" data-target="#xieyi">《用户使用协议》</a><span id="remindRead"></span>
            </div>

%{--
<div class="zp_InXX">
    <span style="height:20px; line-height:19px;">
        <input type="checkbox" name="category" value="用户协议"  class="f_l"/>
        <a class="f_l mLe_10" style="margin-top:-2px;" data-toggle="modal" data-target="#xieyi">我已经阅读并同意《PhotoBox网站用户使用协议》</a></span>
</div>
--}%


        </div>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="xieyi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                        <h4 class="modal-title" id="myModalLabel">用户协议</h4>
                    </div>
                    <div class="modal-body pop_blkcon">
                        <h4>99tucang.com</h4>
                        <strong>协议</strong>
                        <p>1. 免责声明、约束性协议与附加条款及协议。</p>
                        <p>1.1 免责声明。</p>

                        <p>1.2 约束性协议：</p>

                        <p>在接受本协议后，本协议效力及于用户和任何获得本软件的实体及代表其使用本软件之他人。如不同意，请不要使用本软件。</p>

                        <p>协议生效日期 </p>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="annui annui4 pop_btn"  data-dismiss="modal">关闭</button>
                        <!--<button type="button" class="btn btn-primary">提交更改</button>-->
                    </div>
                </div><!-- /.modal-content -->
            </div>
        </div><!-- /.modal -->
			<!-- /模态框（Modal） -->

                <div class="zp_zi">
                    <div  class="load_btnqu">
                        <button class="annui annui2 %{-- btn-info--}%" type="submit" formaction="create" >
                    <i class="icon-ok bigger-110"></i>
                    确认上传
                </button>
                &nbsp; &nbsp; &nbsp;
                <button class="annui annui4" type="reset" onclick=history.go(-1)>
                    <i class="icon-undo bigger-110"></i>
                    取消
                </button>
            </div>
        </div>
    </g:form>
</div>

<g:render template="../home/footer" ></g:render>